<!DOCTYPE html>
<html lang="en">

<head>
    <title>报名</title>
    <#include "/lx/activity/components/meta.html" />
    <#include "/lx/activity/components/stylesheets.html" />
    <link rel="stylesheet" href="//i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
    <link rel="stylesheet" href="/lx/activity/stylesheets/enroll.css?v=4">
</head>

<body>
    <div id="app">
        <div class="block">
            <div class="field2" v-if="checkAvailable('name')">
                <div class="label2">姓名</div>
                <div class="input-wrap2">
                    <input v-model="name" placeholder="请输入姓名" />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('mobile')">
                <div class="label2">手机号码</div>
                <div class="input-wrap2">
                    <input v-model="mobile" type="number" placeholder="请输入手机号码" />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('email')">
                <div class="label2">邮箱</div>
                <div class="input-wrap2">
                    <input v-model="email" type="email" placeholder="请输入邮箱" />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('birth')">
                <div class="label2">生日</div>
                <div class="input-wrap2">
                    <!-- <input ref="birthPicker" placeholder="请输入生日" data-am-datepicker="{format: 'yyyy-mm-dd', theme: 'danger'}" readonly="readonly" /> -->
                    <input v-model="birth" type="date" placeholder="请选择生日" />
                    <div class="placeholder" v-if="!birth">请选择生日</div>
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('province')">
                <div class="label2">所在省份</div>
                <!-- <div class="input-wrap2" @click="popup('#province-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <input v-model="province" placeholder="请输入所在省份" /> -->
                    <!-- <div class="popup">
                        <div>{{ province ? province : '请选择所在省份' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="province" @change="onProvinceChange">
                        <option value="">请选择所在省份</option>
                        <option :value="item.value" v-for="(item, index) in cityArray">{{ item.label }}</option>
                    </select>
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('province')">
                <div class="label2">所在城市</div>
                <!-- <div class="input-wrap2" @click="popup('#city-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <input v-model="city" placeholder="请输入所在城市" /> -->
                    <!-- <div class="popup">
                        <div>{{ city ? city : '请选择所在城市' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="city">
                        <option value="">请选择所在城市</option>
                        <option :value="item.value" v-for="(item, index) in childrenCityArray">{{ item.label }}</option>
                    </select>
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('companyId')">
                <div class="label2">所在公司</div>
                <!-- <div class="input-wrap2" @click="popup('#company-actions')"> -->
                <div class="input-wrap2 ui-select" @click="goSelectCompany">
                    <!-- <div class="popup">
                        <div>{{ companyIndex !== '' ? companyArray[companyIndex].name : '请选择公司' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <!-- <select v-model="companyId">
                        <option value="">请选择公司</option>
                        <option :value="item.id" v-for="(item, index) in companyArray">{{ item.name }}</option>
                    </select> -->
                    <div class="popup">{{ companyName ? companyName : '' }}</div>
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('job')">
                <div class="label2">职务</div>
                <!-- <div class="input-wrap2" @click="popup('#job-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ job ? job : '请选择职务' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="job">
                        <option value="">请选择职务</option>
                        <option :value="item" v-for="(item, index) in jobArray">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="block">
            <div class="field2" v-if="checkAvailable('channel')">
                <div class="label2">如何了解到本次活动？</div>
                <!-- <div class="input-wrap2" @click="popup('#channel-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ channelIndex !== '' ? channelArray[channelIndex] : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="channelIndex">
                        <option value="">请选择...</option>
                        <option :value="index" v-for="(item, index) in channelArray">{{ item }}</option>
                    </select>
                </div>
                <div class="input-wrap2" style="margin-top: 10px;" v-if="channelIndex + 1 == channelArray.length">
                    <input v-model="channel" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('prevSubmit')">
                <div class="label2">在上一个申请季，帮助了多少学生递交此大学申请？</div>
                <div class="input-wrap2">
                    <input type="number" v-model="prevSubmit" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('prevAdopt')">
                <div class="label2">在上一个申请季，有多少学生成功入读？</div>
                <div class="input-wrap2">
                    <input type="number" v-model="prevAdopt" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2" v-if="checkAvailable('question')">
                <div class="label2">我想问大学：</div>
                <div class="input-wrap2">
                    <textarea v-model="question" rows="4" placeholder="请输入..."></textarea>
                </div>
            </div>
        </div>
        <div class="submit-wrap">
            <button class="am-btn am-btn-block submit theme-background-color1" @click="submit">提交</button>
        </div>
        <!-- 弹窗 Modals start -->
        <!-- <div class="am-modal-actions" id="job-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择职务</li>
                    <li @click="job = item" data-am-modal-close v-for="(item, index) in jobArray"><a href="javascript:">{{ item }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="province-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择所在省份</li>
                    <li @click="onProvinceChange(item.value, index)" data-am-modal-close v-for="(item, index) in cityArray"><a href="javascript:">{{ item.label }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="city-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择所在城市</li>
                    <li @click="city = item.value;" data-am-modal-close v-for="(item, index) in childrenCityArray"><a href="javascript:">{{ item.label }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="company-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择公司</li>
                    <li @click="companyIndex = index; companyId = item.id;" data-am-modal-close v-for="(item, index) in companyArray"><a href="javascript:">{{ item.name }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="channel-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">如何了解到本次活动？</li>
                    <li @click="channelIndex = index" data-am-modal-close v-for="(item, index) in channelArray"><a href="javascript:">{{ item }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div> -->
        <!-- 弹窗 Modals end -->
    </div>
    <#include "/lx/activity/components/scripts.html" />
    <script type="text/javascript" src="/lx/activity/assets/json/city.json"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                activityId: '${(activity.id)!}',
                name: '${userName!}',
                mobile: '${mobile!}',
                email: '${email!}',
                birth: '1990-01-01',
                province: '${province!}',
                city: '${city!}',
                companyId: '',
                job: '${job!}',
                channel: '',
                prevSubmit: '',
                prevAdopt: '',
                question: '',

                enrollFields: [],
                jobArray: ["咨询顾问", "文案申请", "外联及其他", "公司管理"],
                companyArray: [],
                companyIndex: '',
                companyName: '',
                channelArray: ["Superlink微信公众号", "小助手朋友圈", "大学通知", "同事推荐", "其它（请填空）"],
                channelIndex: '',
                cityArray: city,
                childrenCityArray: []
            }
        },
        mounted: function() {
            this.companyId = ${companyId!"''"}
            var enrollStr = '${(activity.enrollFields)!}';
            if (enrollStr) {
                this.enrollFields = enrollStr.split(";");
            }
            this.init();
        },
        methods: {
            init() {
                var self = this;
                // var url = '/lx/mini/user/company';
                // var params = {};
                // var success = function(res) {
                //     self.companyArray = res.info;
                //     if (self.companyId != '') {
                //         for (var i = 0; i < self.companyArray.length; i ++) {
                //             if (self.companyId == self.companyArray[i].id) {
                //                 self.companyIndex = i;
                //             }
                //         }
                //     }
                // }
                // var fail = function() {};
                // var complete = function() {};
                // request(url, params, success, fail, complete);

                if (self.province) {
                    for (var i = 0; i < self.cityArray.length; i ++) {
                        if (self.province == self.cityArray[i].value) {
                            self.childrenCityArray = self.cityArray[i].children;
                            break;
                        }
                    }
                }
            },
            submit() {
                var self = this;
                if (self.checkAvailable('name') && !self.name) {
                    msg("请输入姓名");
                    return;
                }
                if (self.checkAvailable('mobile') && !self.mobile) {
                    msg("请输入手机号码");
                    return;
                }
                if (self.checkAvailable('email') && !self.email) {
                    msg("请输入邮箱");
                    return;
                }
                if (self.checkAvailable('birth') && !self.birth) {
                    msg("请输入生日");
                    return;
                }
                if (self.checkAvailable('province') && (!self.province || !self.city)) {
                    msg("请选择所在省市");
                    return;
                }
                if (self.checkAvailable('companyId') && self.companyId === '') {
                    msg("请选择公司");
                    return;
                }
                if (self.checkAvailable('job') && !self.job) {
                    msg("请选择职务");
                    return;
                }
                if (self.checkAvailable('channel') && (self.channelIndex === '' || (self.channelIndex + 1 == self.channelArray.length && !self.channel))) {
                    msg("请选择/输入了解到本次活动的渠道");
                    return;
                }
                if (self.checkAvailable('prevSubmit') && !self.prevSubmit) {
                    msg("请输入在上一个申请季，帮助了多少学生递交此大学申请");
                    return;
                }
                if (self.checkAvailable('prevAdopt') && !self.prevAdopt) {
                    msg("请输入在上一个申请季，有多少学生成功入读");
                    return;
                }

                // self.birth = self.$refs.birthPicker.value;
                if (self.channelIndex + 1 != self.channelArray.length) {
                    self.channel = self.channelArray[self.channelIndex];
                }
                var url = '/lx/mini/activity/submit';
                var params = {
                    id: self.activityId,
                    // name: self.name,
                    // mobile: self.mobile,
                    // email: self.email,
                    // birth: self.birth,
                    // province: self.province,
                    // city: self.city,
                    // companyId: self.companyId,
                    // job: self.job,
                    // channel: self.channel,
                    // prevSubmit: self.prevSubmit,
                    // prevAdopt: self.prevAdopt,
                    // question: self.question
                };
                for (var i = 0; i < self.enrollFields.length; i ++) {
                    if (self.enrollFields[i] == 'province') {
                        params['province'] = self.province;
                        params['city'] = self.city;
                        continue;
                    }
                    params[self.enrollFields[i]] = self[self.enrollFields[i]];
                }
                var success = function(res) {
                    window.history.go(-2);
                    // window.location.href = "/lx/mini/activity/detail?id=" + self.activityId;
                }
                var fail = function() {};
                var complete = function() {};
                request(url, params, success, fail, complete);
            },
            goSelectCompany() {
                layer.open({
                    type: 2,
                    area: ['300px', '600px'],
                    title: false,
                    shadeClose: true,
                    resize: false,
                    content: '/lx/mini/user/selectCompany'
                })
            },
            popup(ele) {
                $(ele).modal('open');
            },
            // onProvinceChange(value, index) {
            //     this.province = value;
            //     this.city = '';
            //     this.childrenCityArray = this.cityArray[index].children;
            // },
            onProvinceChange(event) {
                this.city = '';
                var index = event.target.selectedIndex;
                if (index == 0) {
                    this.childrenCityArray = [];
                } else {
                    this.childrenCityArray = this.cityArray[index - 1].children; // index-1 第一项是“请选择”
                }
            },
            checkAvailable(field) {
                for (var i = 0; i < this.enrollFields.length; i ++) {
                    if (field == this.enrollFields[i]) {
                        return true;
                    }
                }
                return false;
            }
        }
    })
    </script>
    <script>
    // wx.ready(function() {
    //     initWXShare()
    // })
    </script>
</body>

</html>